<template>
	<view>
		<view class="cu-bar search bg-white fixed" style="box-shadow:none">
			<view class="search-form">
				<text class="cuIcon-search"></text>
				<navigator class="response" hover-class="none" url="/pages/base/search/index">
					<input type="text" placeholder="请输入商品名" />
				</navigator>
			</view>
		</view>
		<view class="margin-top-bar bg-white">
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500" @change="change" indicator-color="#cccccc"
				indicator-active-color="#676767">
				<swiper-item class="margin-top-sm" v-for="(item,index) in (swiperData)" :key="index">
					<navigator hover-class="none" :url="item.phoneUrl">
						<image class="swiper-image" :src="item.phoneImg"></image>
					</navigator>
				</swiper-item>
			</swiper>
			<!-- <view class="cu-list grid no-border justify-around">
				<navigator class="cu-item" hover-class="none" :url="item.phoneUrl"
					v-for="(item,index) in (swiperData)" :key="index">
					<image class="nav-image" :src="item.phoneImg"></image>
					<text class="text-black">{{item.name}}</text>
				</navigator>
			</view> -->
			<!-- 公告 -->
			<view class="adsec light bg-white margin-top-sm">
				<swiper class="swiper_container" :autoplay="true" :circular="true" interval="6000">
					<swiper-item v-for="(item,index) in (noticeData)" :key="index">
						<view class="bg-white padding-left-sm text-black">
							<text class="cu-tag line-black text-bold">最新资讯</text>
							<text class="details margin-left">{{item.noticeTitle}}</text>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<uni-grid :column="5" :show-border="false" :highlight="true">
				<uni-grid-item v-for="(item, index) in btFLList" :index="index" :key="index">
					<view class="grid-item-box" @click="click(item.text)">
						<view class="butView butBack">
							<!-- <image :src="item.image" mode="scaleToFill" class="butImage"></image> -->
							<image :src="testImage" mode="scaleToFill" class="butImage"></image>
						</view>
						<text class="text">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			<uni-grid :column="2" :show-border="false" :highlight="true" class="goods-list-001">
				<uni-grid-item v-for="(item, index) in likeList" :index="index" :key="index" style="margin-bottom: 220upx;">
				<!-- <uni-grid-item v-for="(item, index) in likeList" :index="index" :key="index"> -->
					<!-- <view class="grid-item-box" @click="change(item.text)"> -->
					<view class="item" @click="click(item.text)">
						<view class="image">
							<!-- <image :src="item.image" mode="scaleToFill" class="butImage"></image> -->
							<!-- <image :src="testImage" mode="scaleToFill"></image> -->
						</view>
						<!-- <text class="text">{{item.text}}</text> -->
						<view class="name">特价耐吉斯新西兰版猫粮5.45KG耐吉斯猫粮</view>
						<view class="price">115</view>
						<view class="other">
							<view class="sall">已售1324</view>
							<view class="btn">抢购</view>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
			<view class="title" style="margin-top: 20px;">
				猜你喜欢
			</view>
			<view v-for="(item, index) in likeList" :index="index" :key="index" class="love-list-001">
				<!-- <view class="grid-item-box" @click="change(item.text)"> -->
				<view class="itemlove" @click="click(item.text)">
					<view class="imagelove">
						<!-- <image :src="item.image" mode="scaleToFill" class="butImage"></image> -->
						<!-- <image :src="testImage" mode="scaleToFill"></image> -->
					</view>
					<!-- <text class="text">{{item.text}}</text> -->
					<view class="infolove">
						<view class="namelove">特价耐吉斯新西兰版猫粮5.45KG耐吉斯猫粮</view>
						<view class="desclove">内含猫薄荷和相纸能吸引猫咪喜欢</view>
						<view class="pricelove">115</view>
						<view class="otherlove">
							<view class="salllove">已售1324</view>
							<view class="btnlove">抢购</view>
						</view>
					</view>
				</view>
			</view>
			<view class="brand-list-001">
				<view class="leftbrand" style="width: 50%; height: 200px;">
					<view class="boxbrand">
						<view class="labelbrand">关于我们 ></view>
						<view class="descbrand">Brand<br>Introduction</view>
						<view class="imagebrand">
							<image src="../../static/image/logo.png" mode="" style="no-repeat bottom center; background-size: auto 100%; height: 60px; margin-top: 40px;">
							</image>
						</view>
					</view>
				</view>
				<view class="rightbrand" style="width: 50%; height: 210px;">
					<view class="itembrand" style="height: 70px;">
						<view class="iconbrand icon1brand">
							<image src="../../static/image/kctx.png" mode="" style="no-repeat bottom center; background-size: auto 100%; height: 40px;">
							</image>
						</view>
						<view class="infobrand">
							<view class="labelbrand">产品溯源 ></view>
							<view class="descbrand">Special Courses</view>
						</view>
					</view>
					<view class="itembrand" style="height: 70px;">
						<view class="iconbrand icon2brand">
							<image src="../../static/image/yqdj.png" mode="" style="no-repeat bottom center; background-size: auto 100%; height: 40px; ">
							</image>
						</view>
						<view class="infobrand">
							<view class="labelbrand">宠物医院 ></view>
							<view class="descbrand">Search School</view>
						</view>
					</view>
					<view class="itembrand" style="height: 70px;">
						<view class="iconbrand icon3brand">
							<image src="../../static/image/ryyq.png" mode="" style="no-repeat bottom center; background-size: auto 100%; height: 40px;">
							</image>
						</view>
						<view class="infobrand">
							<view class="labelbrand">经验浅谈 ></view>
							<view class="descbrand">Special Courses</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <navigator hover-class="none" url='/pages/goods/goods-detail/index?id=1442505794278191105'>
				<image class="margin-top-sm goods-image"
				  src="https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/1/material/055f3304-13d1-43c8-8547-326cc3efc7fc.jpg">
				</image>
				<view class="flex justify-between margin-top-sm align-center padding-lr">
				  <view class="text-black">RMB 7999 起</view>
				  <view class="cu-btn round bg-gray text-white buy-now">购买</view>
				</view>
			</navigator>
			<navigator hover-class="none" url='/pages/goods/goods-detail/index?id=1442512050032275457'>
				<image class="margin-top-xl goods-image"
				  src="https://joolun-base-test.oss-cn-zhangjiakou.aliyuncs.com/1/material/2f290591-8351-4be8-a9ab-6277d007b8c7.jpg">
				</image>
				<view class="flex justify-between margin-top-sm align-center padding-lr padding-bottom">
				  <view class="text-black">RMB 3799 起</view>
				  <view class="cu-btn round bg-gray text-white buy-now">购买</view>
				</view>
			</navigator> -->
			<!-- <ad unit-id="{{config.adBannerID}}" wx:if="{{config.adEnable}}"></ad> -->
			<!-- <view class="wrapper bg-white margin-top-xl">
				<view class="cu-bar text-black">
					<view class="action margin-left-sm">
						<text class="text-xxl text-bold">热销单品</text>
					</view>
					<navigator hover-class="none" url="/pages/goods/goods-list/index?type=2" class="action">
						更多<text class="cuIcon-right"></text>
					</navigator>
				</view>
				<view class="wrapper-list bg-white radius">
					<scroll-view class="scroll-view_x hot-goods" scroll-x>
						<block v-for="(item,index) in (goodsListHot)" :key="index">



							<navigator hover-class="none" :url="'/pages/goods/goods-detail/index?id='+(item.id)"
								class="item">
								<view class="text-cut text-bold text-xxl text-black margin-top-sm">{{item.name}}</view>
								<view class="text-cut text-sm text-gray margin-top-sm">{{item.sellPoint}}</view>
								<view class="img-box margin-top-xl">
									<image :src="item.picUrls[0] ? item.picUrls[0] : '/public/img/no_pic.png'"></image>
								</view>
								<view class="flex justify-between margin-top">
									<view class="text-df padding-top-sm"><text
											class="text-price">{{item.salesPrice}}</text> 起</view>
									<view class="cu-btn round shadow-blur text-white buy-now">购买</view>
								</view>
							</navigator>



						</block>
					</scroll-view>
				</view>
			</view>
			<view class="cu-bar">
				<view class="action">
					<text class="text-xxl text-bold text-black">猜你喜欢</text>
				</view>
			</view>
			<goods-card :goodsList="goodsList" />
			<view :class="'cu-load bg-white '+(loadmore?'loading':'over')"></view> -->
		</view>
		<!-- <ad :unit-id="config.adBannerID" v-if="config.adEnable"></ad> -->
	</view>
</template>

<script>
	import goodsCard from "@/components/goods-card-index/index";
	import goodsRow from "@/components/goods-row/index";
	const app = getApp();
	export default {
		components: {
			goodsCard,
			goodsRow
		},
		data() {
			return {
				config: app.globalData.config,
				page: {
					searchCount: false,
					current: 1,
					size: 10
				},
				loadmore: true,
				goodsList: [],
				goodsListNew: [],
				goodsListHot: [],
				testImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.stockfresh.com%2Ffiles%2Fa%2Fagnessz%2Fm%2F39%2F6024020_stock-vector-kitty-head-icon-2-with-long-shadow.jpg&refer=http%3A%2F%2Fimg3.stockfresh.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648033947&t=b5182edb5d2fbdd7864674b9ebc5f423',
				swiperData: [
					{phoneImg: '../../static/image/banner.jpg'},
					{phoneImg: '../../static/image/banner-02.jpg'}
				],
				navigateData: [],
				cardCur: 0,
				noticeData: [
					{noticeTitle: '商城即将上线'},
					{noticeTitle: '阿汤猫即将上线 2021-02-01'},
				],
				btFLList: [
					{
						image: '../../static/image/icon1.jpg',
						text: '狗粮专区',
					},
					{
						image: '../../static/image/icon2.jpg',
						text: '猫粮专区',
					},{
						image: '../../static/image/icon3.jpg',
						text: '驱虫专区',
					},{
						image: '../../static/image/icon4.jpg',
						text: '清洁专区',
					},{
						image: '../../static/image/icon5.jpg',
						text: '保健品专区',
					},{
						image: '../../static/image/icon6.jpg',
						text: '零食专区',
					},{
						image: '../../static/image/icon7.jpg',
						text: '罐头专区',
					},{
						image: '../../static/image/icon8.jpg',
						text: '用品专区',
					},{
						image: '../../static/image/icon8.jpg',
						text: '玩具专区',
					},{
						image: '../../static/image/icon10.jpg',
						text: '猫砂专区',
					},
				],
				likeList: [
					{
						image: '../../static/image/icon1.jpg',
						text: '狗粮专区',
					},
					{
						image: '../../static/image/icon2.jpg',
						text: '猫粮专区',
					},{
						image: '../../static/image/icon3.jpg',
						text: '驱虫专区',
					}
				],
			};
		},
		onLoad() {
			app.globalData.initPage().then(res => {
				this.loadData();
			});
		},
		onShow() {
			//更新tabbar购物车数量
			uni.setTabBarBadge({
				index: 2,
				text: app.globalData.shoppingCartCount + ''
			});
		},
		onShareAppMessage: function() {
			let title = '阿汤猫宠物用品商城';
			let path = 'pages/home/index';
			return {
				title: title,
				path: path,
				success: function(res) {
					if (res.errMsg == 'shareAppMessage:ok') {
						console.log(res.errMsg);
					}
				},
				fail: function(res) { // 转发失败
				}
			};
		},
		onPullDownRefresh() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			this.refresh(); // 隐藏导航栏加载框

			uni.hideNavigationBarLoading(); // 停止下拉动作

			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.loadmore) {
				this.setData({
					["page.current"]: this.page.current + 1
				});
				this.goodsPage();
			}
		},
		methods: {
			loadData() {
				this.goodsNew();
				this.goodsHot();
				this.goodsPage();
				this.getAdvertisement();
				this.getNavigateData();
				this.getNoticeData();
			},

			//新品首发
			goodsNew() {
				app.globalData.api.goodsPage({
					searchCount: false,
					current: 1,
					size: 5,
					descs: 'create_time'
				}).then(res => {
					let goodsListNew = res.data.records;
					this.setData({
						goodsListNew: goodsListNew
					});
				});
			},

			//热销单品
			goodsHot() {
				app.globalData.api.goodsPage({
					searchCount: false,
					current: 1,
					size: 5,
					descs: 'sale_num'
				}).then(res => {
					let goodsListHot = res.data.records;
					this.setData({
						goodsListHot: goodsListHot
					});
				});
			},

			goodsPage(e) {
				app.globalData.api.goodsPage(this.page).then(res => {
					let goodsList = res.data.records;
					this.setData({
						goodsList: [...this.goodsList, ...goodsList]
					});

					if (goodsList.length < this.page.size) {
						this.setData({
							loadmore: false
						});
					}
				});
			},

			getAdvertisement() {
				app.globalData.api.getAdvertisement({
					location: "GZ10011"
				}).then(res => {
					this.setData({
						swiperData: res.data
					});
				});
			},

			getNavigateData() {
				app.globalData.api.getAdvertisement({
					location: "GZ10004"
				}).then(res => {
					this.setData({
						navigateData: res.data
					});
				});
			},

			getNoticeData() {
				app.globalData.api.getNoticeData({
					noticeType: "2"
				}).then(res => {
					console.log(res);
					this.setData({
						noticeData: res.data
					});
				});
			},

			refresh() {
				this.setData({
					loadmore: true,
					["page.current"]: 1,
					goodsList: [],
					goodsListNew: [],
					goodsListHot: []
				});
				this.loadData();
			},

			jumpPage(e) {
				let page = e.currentTarget.dataset.page;

				if (page) {
					uni.navigateTo({
						url: page
					});
				}
			},

			change() {
				// console.log("占位：函数 change 未声明");
			}
			,click(e){
				uni.navigateTo({
					url: '../goods/goods-detail/index?id=1442505794278191105',
				})
			}
		}
	};
</script>
<style>
	.wrapper-list {
		white-space: nowrap;
		padding: 0rpx 0rpx 50rpx 0rpx;
	}

	.wrapper-list .item {
		display: inline-block;
		width: 560rpx;
		height: 800rpx;
		margin: 60rpx 0 60rpx 50rpx;
		padding: 10rpx 30rpx;
		border-radius: 25rpx;
		box-shadow: 0rpx 0rpx 60rpx rgba(211, 211, 211, 1);
	}

	.wrapper-list .item:nth-last-child(1) {
		margin-right: 20rpx;
	}

	.wrapper-list .item .img-box {
		width: 100%;
		height: 480rpx;
	}

	.wrapper-list .item .img-box image {
		width: 100%;
		height: 100%;
	}

	.adsec {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding: 7rpx 10rpx;
		height: 80rpx;
	}

	.adsec-icon {
		height: 80rpx;
		line-height: 40rpx;
	}

	.search-form {
		border-radius: 20rpx;
	}

	.swiper_container {
		height: 80rpx;
		width: 95%;
		line-height: 80rpx;
		line-height: 40rpx;
	}

	.screen-swiper {
		height: 480rpx;
	}

	.swiper-image {
		width: 96% !important;
		height: 350rpx !important;
		margin: 40rpx auto !important;
		border-radius: 20rpx;
		box-shadow: 0rpx 10rpx 60rpx rgba(211, 211, 211, 1);
	}

	.nav-image {
		width: 100rpx;
		height: 100rpx
	}

	.text-black {
		color: #000 !important;
	}

	.goods-image {
		width: 100%;
		height: 1150rpx;
	}

	.hot-goods {
		width: auto;
		overflow: hidden;
	}

	.buy-now {
		color: #2967ff;
		width: 160rpx;
	}
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.butView{
		border-radius: 50%;
		/* border: #0000FF solid 0.1px; */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80upx;
		height: 80upx;
	}
	.butImage{
		width: 50upx;
		height: 50upx;
	}
	.brand-list-001{
		display: flex;
		flex-direction: row;
	}
	.rightbrand{
		display: flex;
		flex-direction: column;
	}
</style>
